<route lang="json5">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '功能 > 子账号管理',
    enablePullDownRefresh:false,
    onReachBottomDistance:150,
  },
}
</route>

<script setup lang="ts">
import type { DeviceList } from '@/api/device'
import { ref } from 'vue'
import { getPayList } from '@/api/device'

const page = ref(1)
const loadState = ref<'loading' | 'error' | 'finished'>('loading')
const dataList = ref([]) // 列表数据
const total = ref(50) // 总条数
function loadMore() {
  console.log('滚动到底部加载更多数据')
  if (loadState.value === 'finished') {
    return
  }
  setTimeout(() => {
    // 模拟请求数据
    if (dataList.value.length >= total.value) {
      loadState.value = 'finished'
    }
    else {
      // 每次加载20条
      for (let i = 0; i < 20; i++) {
        dataList.value.push(i)
      }
    }
  }, 1000)
}
onLoad(() => {
  // 初始化加载数据
  loadMore()
})
onReachBottom(() => {
  // 触底加载更多数据
  if (loadState.value === 'finished') {
    return
  }
  loadMore()
})
// const { loading, error, data, run } = useRequest<DeviceList>(() => getPayList({ page: page.value }), { immediate: true })
// function loadMore() {
//   console.log('滚动到底部加载更多数据')
//   page.value++
//   run()
//   data.value = {
//     code: 0,
//     list: [],
//     total: 0,
//     pageNum: 0,
//     pageSize: 0,
//     text: '',
//   }
//   data.value.list.push({
//     id: page.value,
//     name: 'string;',
//     type: 'string;',
//     status: 'string;',
//     createTime: 'string;',
//     updateTime: 'string;',
//   })
//   console.log(data.value.list)
// }

const showEdit = ref(false)
const editRef = ref()
const formModel = ref({
  id: 'cid123123',
  UserPwdB: '',
  nick: '',
  tel: '',
  Email: '',
  QQ: '',
  remark: '',
  sex: 0,
  status: 1,
})
function handleSearch(e) {
  console.log('搜索内容:', e.value)
}
function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      handleClose()
    }
    else {
      console.log('表单验证不通过')
    }
  })
}

function handleEdit() {
  showEdit.value = true
}
function handleClose() {
  showEdit.value = false
}
const submchList = ref(['1483278423', '1483278424', '1483278425', '1483278426', '1483278427', '1483278428'])
const checkedGroup = ref([])
const showAuthor = ref(false)
function handleCheck(item) {
  if (checkedGroup.value.includes(item)) {
    checkedGroup.value = checkedGroup.value.filter(i => i !== item)
  }
  else {
    checkedGroup.value.push(item)
  }
}
function noop() {
}
</script>

<template>
  <view class="wot-list-top-wrap">
    <view class="search">
      <wd-search placeholder="输入名称、ID、账号、手机号" cancel-txt="搜索" @cancel="handleSearch">
        <template #prefix>
          <view class="pl-30rpx">
            账号搜索
          </view>
        </template>
      </wd-search>
    </view>
    <view class="wot-row wot-title">
      <wd-row>
        <wd-col :span="4">
          <view class="wot-item">
            名称
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            账号
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            状态
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            设备数
          </view>
        </wd-col>
        <wd-col :span="7">
          <view class="wot-item">
            操作
          </view>
        </wd-col>
      </wd-row>
    </view>
  </view>
  <view v-if="dataList.length === 0" class="pt-20">
    <wd-status-tip image="content" tip="暂无内容" />
  </view>
  <view v-else class="wot-list btn-pd">
    <view v-for="(item, index) in dataList" :key="index" class="wot-row">
      <wd-row>
        <wd-col :span="4">
          <view class="wot-item">
            李四
          </view>
        </wd-col>
        <wd-col :span="5">
          <view class="wot-item">
            716723612{{ index }}
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            <wd-tag type="primary" bg-color="#19c94a" @click="handleEdit">
              启用
            </wd-tag>
          </view>
        </wd-col>
        <wd-col :span="4">
          <view class="wot-item">
            0
          </view>
        </wd-col>
        <wd-col :span="7">
          <view class="wot-item">
            <wd-button size="small" :round="false" custom-class="primary-btn" @click="showEdit = true">
              编辑
            </wd-button>
            <wd-button size="small" :round="false" custom-class="primary-btn" @click="showAuthor = true">
              授权
            </wd-button>
          </view>
        </wd-col>
      </wd-row>
    </view>
    <wd-loadmore custom-class="loadmore" :state="loadState" @reload="loadMore" />
  </view>
  <view class="footer">
    <wd-button type="primary" size="small" block @click="showEdit = true">
      新增
    </wd-button>
    <view class="pb-safe" />
  </view>
  <!-- 子账号添加/编辑 start -->
  <wd-popup v-model="showEdit" :lock-scroll="true" closable position="bottom" :safe-area-inset-bottom="true" custom-style="border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      【 子账号添加/编辑 】
    </view>
    <wd-form ref="editRef" :model="formModel">
      <wd-cell-group border>
        <wd-input
          v-model="formModel.id"
          label="登录账号："
          label-width="100px"
          prop="name"
          clearable
          readonly
        />
        <wd-input
          v-model="formModel.UserPwdB"
          label="登录密码："
          label-width="100px"
          prop="UserPwdB"
          clearable
          placeholder="登录密码"
          :rules="[{ required: true, message: '登录密码不能为空' }]"
        />
        <wd-input
          v-model="formModel.nick"
          label="名称："
          label-width="100px"
          prop="nick"
          clearable
          placeholder="名称"
        />
        <wd-input
          v-model="formModel.tel"
          label="手机号码："
          label-width="100px"
          prop="tel"
          clearable
          placeholder="手机号码"
        />
        <wd-input
          v-model="formModel.Email"
          label="Email："
          label-width="100px"
          prop="Email"
          clearable
          placeholder="Email"
        />
        <wd-input
          v-model="formModel.Email"
          label="QQ："
          label-width="100px"
          prop="QQ"
          clearable
          placeholder="QQ"
        />
        <wd-input
          v-model="formModel.remark"
          label="备注："
          label-width="100px"
          prop="remark"
          clearable
          placeholder="备注"
        />
        <radio-cell
          label-width="100px"
          title="性别："
        >
          <wd-radio-group
            v-model="formModel.sex" shape="dot" inline
          >
            <wd-radio :value="0">
              男
            </wd-radio>
            <wd-radio :value="1">
              女
            </wd-radio>
          </wd-radio-group>
        </radio-cell>
        <radio-cell
          label-width="100px"
          title="状态："
        >
          <wd-radio-group
            v-model="formModel.sex" shape="dot" inline
          >
            <wd-radio :value="0">
              停用
            </wd-radio>
            <wd-radio :value="1">
              启用
            </wd-radio>
          </wd-radio-group>
        </radio-cell>
      </wd-cell-group>
      <view class="btn-outer-pd">
        <wd-button type="primary" size="small" block @click="handleSubmit">
          提交
        </wd-button>
      </view>
    </wd-form>
  </wd-popup>
  <!-- 子账号添加/编辑 start -->

  <!-- 子账号添加/编辑 start -->
  <wd-popup v-model="showAuthor" lock-scroll closable position="bottom" :safe-area-inset-bottom="true" custom-style="border-radius: 32rpx 32rpx 0 0;" @close="handleClose">
    <view class="wot-form-title">
      【 设备授权 】
    </view>
    <view class="pt-20rpx">
      <wd-cell-group border>
        <wd-checkbox-group v-model="checkedGroup" size="large">
          <template v-for="item in submchList" :key="item">
            <wd-cell :title="item" clickable center @click="handleCheck(item)">
              <view @click.stop>
                <wd-checkbox :model-value="item" custom-style="margin:0;" />
              </view>
            </wd-cell>
          </template>
        </wd-checkbox-group>
      </wd-cell-group>
      <view class="btn-outer-pd">
        <wd-button type="primary" size="small" block @click="handleSubmit">
          保存
        </wd-button>
      </view>
    </view>
  </wd-popup>
  <!-- <wd-action-sheet v-model="showAuthor" title="【 设备授权 】" @close="handleClose" /> -->
  <!-- 子账号添加/编辑 start -->
</template>

<style lang="scss" scoped>
#app {
  height: 100vh;
  overflow: hidden;
}
.scroll-view {
    height: calc(100vh - 272rpx - env(safe-area-inset-bottom));
}
:deep(){
  .primary-btn {
    display: inline-block;
    width: 70rpx;
    height: 40rpx !important;
    margin: 0 5rpx !important;
}
}
.author-content {
    padding: 0 6%;
    height: 70vh;
    overflow-y: auto;
}
.footer {
    padding: 30rpx 20%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.btn-pd{
  padding-bottom: calc(126rpx + env(safe-area-inset-bottom));
}
</style>
